import CustomLayout from '@/components/commonComponent/customLayout/customLayout';
import CustomSiderList from '@/components/commonComponent/customSiderList/customSiderList';
import { useState } from 'react';
import Content from './content';
import { datasettree } from '@/api/sr-stms';
import { useRequest } from 'ahooks'

const { CustomContent, CustomSider } = CustomLayout;

export type ProjectItem = {
  id: string;
  name: string;
};

const DatasetDetail = () => {
  const [selectedProject, setSelectedProject] = useState<null | ProjectItem>(
    null,
  );

  const { data: projectList } = useRequest(datasettree, {
    formatResult: res => res.data.map((item: any) => ({ id: item.id, name: item.dataset_name }))
  })


  const projectSelected = (project: ProjectItem) => {
    setSelectedProject(project);
  };

  return (
    <div className="router-view">
      <CustomLayout customMode>
        <CustomSider>
          <CustomSiderList
            list={projectList || []}
            placeholder="查询数据集名称"
            onSelect={projectSelected}
          ></CustomSiderList>
        </CustomSider>
        <CustomContent>
          <Content selectedProject={selectedProject}></Content>
        </CustomContent>
      </CustomLayout>
    </div>
  );
};

export default DatasetDetail;
